1. Selector 클래스

샘플예제

1. 주요 메서드 목록 과 한개의 함수 $()

함수

주요 메소드 (전체가 필요할경우 책 또는 프로토타입참고하기 바란다.)

나머지 메소드는 내부처리를 위해서 사용되는 메소드 이다.

2. 함수 & 메소드별 사용법 및 특징

var Selector = Class.create(
  {메소드}
);  // 위와 같이 Selector를 프로토타입으로 처리하는 방법
 
Object.extend(Selector,
 {메소드}
);  // 위와 같이 Selector를 extend한 방법 으로 나뉜다.

Selector 클래스의 목적은 아규먼트로 주어진 조건에 적합한 HTML의 엘리먼트(들)을 추출 하는것이다.

예제명 : divElements.html
          .
          .
          .
          var selectTag = new Selector('div');
          var findScope = selectTag.findElements();
  
          var idResult = [];                        
          findScope.each(function(value, index) {
              idResult[index] = value.id;
          });
          $('show1').innerHTML = '결과: ' + idResult.inspect();
          '
          '
          '

위 예제는 간단한 Selector 예제로서 조건으로 주어진 'div'엘레먼트를 찾는 예제다. findElements() 메소드를 통하여 오브젝트 배열 엘리먼트를 만들고
오브젝트 배열 엘리먼트를 순차적으로 실행하는 Enumerable.each()를 통해 화면에 배열 엘리먼트를 출력한다.
-each() 메소드의 아규먼트는 each() 메소드가 설정 한다. 첫번째 인자는 배열의 엘리먼트가 순차적으로 설정되고 두번째 아규먼트는 배열의 인덱스가 온다.

  initialize: function(expression) {
    this.expression = expression.strip();
    this.compileMatcher();
  },

var selector = new Selector('div') 에서 아규먼트로 지정한 'div' 가 파라메터인 expresstion에 설정 되고
protorype 된 String 클래스를 확장한 메소드 strip()를 이용하여 문자열 양 끝의 공백을 제거한 내용을 expresstion에 담고
compileMatcher() 메소드를 호출한다.

예제명 : findElementsElmt.html
              .
              .
              .
    okClick: function(event) {
        var selectTag = 'option';        // option 태그의 모든 엘리먼트 ID를 반환한다.
        Show.result(selectTag, '1');

        selectTag = '#sport';            // #은 지정한 엘리먼트 ID만 추출하라는 의미 이다.
        Show.result(selectTag, '2');

        selectTag = 'option.cssShow';    // option 태그의 css 이름이 cssShow인 엘리먼트만 추출한다.
        Show.result(selectTag, '3');

        Show.result(selectTag, '4', $('sport')); // scope를 받아 들여 원하는 영역을 출력하게 조정 한다.
    },

    result: function(selectTag, showID, scope) {
        var newTag = new Selector(selectTag);
        var findScope = newTag.findElements(scope);

        var idResult = [];
        findScope.each(function(value, index) {
            idResult[index] = value.id;
        });
        $('show' + showID).innerHTML = showID + ' 결과: ' + idResult.inspect();
    }
              .
              .
              .

예제명 : findElementsAttr.html
              .
              .
              . 
    okClick: function(event) {
        selectTag = 'p[title]';       
        Show.result(selectTag, '1');     // p태그에 title 속성을 가진 엘리먼트를 돌려준다.

        selectTag = '*[class]';
        Show.result(selectTag, '2');     // *은 모든 엘리먼트를 대상으로 속성 또는 속성?을 매치한다. 현재는 title 속성을 가진 엘리먼트를 돌려준다.

        selectTag = 'p[class="commClass"]';
        Show.result(selectTag, '3');     // p 태그에 css 클래스가 commClass 인 엘리먼트를 반환 한다.

        selectTag = 'p[class!="commClass"]';
        Show.result(selectTag, '4');      // p 태그에 css 클래스가 commClass 가 아닌 엘리먼트를 반환 한다.  

        selectTag = 'p[class~="commClass"]';
        Show.result(selectTag, '5');      // p 태그에 css 클래스가 commClass 로 시작하는 엘리먼트를 반환 한다.  
    },

    result: function(selectTag, showID) {
        var newTag = new Selector(selectTag);
        var findScope = newTag.findElements();

        var idResult = [];
        findScope.each(function(value, index) {
            idResult[index] = value.id;
        });        
        $('show' + showID).innerHTML = showID + ' 결과: ' + idResult.inspect();
    }
              .
              .
              .

$$는 함수라는 명칭에서 알수 있듯이 클래스에 종속되어 있지 않아서 편하게 가져다가 쓸수있다.

예제명 : $$basic.html
              .
              .
              .
    okClick: function(event) {
        var selectTag = document.getElementsByTagName('div');  //태그이름이 div인 모든 엘레먼트를 반환한다.
        var idResult = [];
        $A(selectTag).each(function(value, index) {
            idResult[index] = value.id;
        });
        Show.result(idResult, '1');
        
        selectTag = $$('div');
        idResult = [];
        selectTag.each(function(value, index) {
            idResult[index] = value.id;
        });
        Show.result(idResult, '2');

        idResult = [];
        $$('div').each(function(value, index) {
            idResult[index] = value.id;
        });
        Show.result(idResult, '3');
    },

    result: function(idResult, showID) {
        $('show' + showID).innerHTML = showID + ' 결과: ' + idResult.inspect();
    }
              .
              .
              .

예제명 : $$Many.html
              .
              .
              .
        selectTag = $$('#sport option');   
        Show.result(selectTag, '2');         //$$는 findElements()메소드와는 다르게 공백을 기준으로 문자영을 분리 하여 처리 한다.

        selectTag = $$('#river option', '#manyKind div');
        Show.result(selectTag, '3');         //$$는 복수의 조건을 받아서 처리 할수 있다.

        selectTag = $$('option.cssShow');
        selectTag.each(function(value, index) {
            $(value.id).selected = true;
        });
        Show.result(selectTag, '5');
              .
              .
              .

문서에 대하여

• 최초작성자 : 허용운
• 최초작성일 : 2008년 01월 03일
• 이 문서는 Ajax prototype.js 프로토타입 완전분석을 정리한 내용 입니다.
• 이 문서를 다른 블로그나 홈페이지에 퍼가실 경우에는 출처를 꼭 밝혀 주시면 고맙겠습니다.~^\^